<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>弹出框</title>
		<link type="text/css" href="css/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="scripts/jquery-ui-1.8.6.custom.min.js"></script>
		<script type="text/javascript" src="scripts/jquery.layout.min.js"></script>
       <script type="text/javascript" src="scripts/jquery-timer.js"></script>
<style>
body {
	font-size: 62.5%;
}

label,input {
	display: block;
}

input.text {
	margin-bottom: 12px;
	width: 95%;
	padding: .4em;
}

fieldset {
	padding: 0;
	border: 0;
	margin-top: 25px;
}

h1 {
	font-size: 1.2em;
	margin: .6em 0;
}

div#users-contain {
	width: 350px;
	margin: 20px 0;
}

div#users-contain table {
	margin: 1em 0;
	border-collapse: collapse;
	width: 100%;
}

div#users-contain table td,div#users-contain table th {
	border: 1px solid #eee;
	padding: .6em 10px;
	text-align: left;
}

.ui-dialog .ui-state-error {
	padding: .3em;
}

.validateTips {
	border: 1px solid transparent;
	padding: 0.3em;
}
.messageDaligDiv{
overflow-y: auto; height: 250px; width: 450px;
}
</style>
<script>
    //当前用户用户名
    var username='';
    //是否点击了注销按钮
    var logoutbutton=false;
	/**init start*/
	$(function() {
		//初始化好登陆dialog
		$( "#dialog-login" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			resizable: false,
			buttons: {
				Login: login,
				Cancel: function() {
					//先关闭登陆框，然后初始化页面信息
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				//先关闭登陆框，然后初始化页面信息
				init();	
			}
		});
		 //初始化用户名
		 username='';
		 //初始化注销信息
		 logoutbutton=false;
		//开始获取信息		
		init();	
	});
	
	
	/** 初始化函数区域 start*/
	//页面加载后的初始化操作
	function init() {
		$.ajax({
			type : 'POST',
			timeout : 2000,
			url : 'getUserInfo.do',
			dataType : 'json',
			success : function(message) {
				if (!errorvalidate(message)) {
					//存在错误，需要初始化登陆dialog
					//alert('这个用户还未登录');
					//打开这个登陆dialog
					$( "#dialog-login" ).dialog( "open" );
				} else {
					//用户已经登陆完毕
					//获得用户名称
					username = message.username;
					//用户名不为空说明登陆成功
					if(username!=''){
					//关闭浏览器时提示					
					window.onbeforeunload = function() {
						//如果点击了注销按钮，什么也不做
						if(logoutbutton){
						}else{
						   return "离开或刷新当前页面聊天记录将被清除，确定继续？";
						}
					};
					window.onunload = function() {
						//如果点击了注销按钮，什么也不做
						if(logoutbutton){
						}else{
							onunloadlogout();
						}
					};
					//添加注销button
					$("#logoutbuttons").append("<button id='logout'>注销</button>");					
					//注销button
					$("#logout").button().click(function() {
						logout();
					});
					//添加布局
					$('body').layout({
						applyDefaultStyles : true
					});

					//设置每2000ms接收一次消息
					$.timer(2000, function(timer) {
						receviceMessage();
					});
					//设置每5000ms更新一次用户信息
					$.timer(5000, function(timer) {
						loginUsers();
					});}
				}
			},
			error : ajaxError
		});
	}
	/** 初始化函数区域 end*/
	/**init end*/
	
	/**** 布局区  start*/
	//添加按钮
	function addButton(id){
		$('#buttons').append("<button id='create-user"+id+"'>user：  "+id+"</button>");
		$("#create-user"+id).button()
	    .click(function() {
	    	addForm(id);
			  //展示的form数量加1
	    	formShowCount=formShowCount+1;
			$("#dialog-form"+id).dialog("open");
			//如果显示的form数量等于1，需要记录其位置
			if(formShowCount==1){
			   positions=$("#dialog-form"+id).offset();			   
			}
			//如果显示的form数量大于1，dialog数量需要偏移
			if(formShowCount>1){
				$("#dialog-form"+id).dialog("option","position",[positions.left+(25*(formShowCount-1)),positions.top+(25*(formShowCount-1))]);
			}
			$(this).button({ disabled: true });
		});
	}
	//设置弹出框的显示位置
	var positions='center';
	//显示的form的个数
	var formShowCount=0;
	//添加form dialog弹出框表单
	function addForm(id){	
		//如果还未创建这个div进行创建，并且初始化dialog
		if($('#dialog-form'+id).length<1){	
		   var formdiv="<div id='dialog-form"+id+"' title='dialog-form"+id+"'><div id='show"+id+"' class='messageDaligDiv'></div><form id='form"+id+"' name=''form"+id+"' method='post'> 对方姓名:<input type='text' name='toUserName' readonly='readonly' value='"+id+"'/><br /> 聊天内容：<textarea rows='4' cols='70' name='message'></textarea><br /> <label id='formLabel"+id+"'></label> <button type='button' id='submitButton"+id+"' name='messageSubmit' onclick=\"sendMessage('"+id+"');\">提交</button></form></div>";
	       $('#forms').append(formdiv);
	       //初始化dialog
	    	$('#dialog-form'+id).dialog({
				autoOpen: false,
				position:'center',
				height: 500,
				width: 500,
				modal: false,
				close: function() {
					  //展示的form数量减去1
		    		  formShowCount=formShowCount-1;
					$("#create-user"+id).button({ disabled: false });
				}
			});
	    }
	}
	/**** 布局区 end*/


	/*******AJAX 与后台交互   start   */
	//登陆操作,需要同步请求
	function login() {
		if($.trim($('#loginUserName').val())!=''){
		 $.ajax({
			type : 'POST',
			async : false,
			timeout : 2000,
			url : 'login.do',
			data : $('#loginForm').serialize(),
			success : function(data) {
				//登陆成功
				if (data == 'success') {
					//先关闭登陆框，然后初始化页面信息
					$( "#dialog-login" ).dialog( "close" );
				}else{
					alert('用户名或者密码错误，请重新输入');
				}
			},
			error : ajaxError
		 });
		}else{
			alert('请输入用户名');
			$('#loginUserName').focus();
		}
	}
	//关闭或者刷新页面时的注销操作
	function onunloadlogout() {
		//执行注销操作//需要同步请求
		$.ajax({
			type : 'POST',
			async : false,
			timeout : 2000,
			url : 'logout.do',
			success : function(data) {
				//alert(data);
			},
			error : ajaxError
		});
	}
	//注销操作
	function logout() {
		//执行注销操作//需要同步请求
		$.ajax({
			type : 'POST',
			async : false,
			timeout : 2000,
			url : 'logout.do',
			success : function(data) {
				if (data == 'success') {
					//注销成功，设置点击了注销按钮，然后刷新
				    logoutbutton=true;
				    window.location.reload();
				}else{
					alert('注销失败，请重试');
				}
			},
			error : ajaxError
		});
	}
	//当前发送消息
	function sendMessage(id) {
		$.ajax({
			type : 'POST',
			timeout : 2000,
			url : 'sendMessage.do',
			data : $('#form' + id).serialize(),
			dataType : 'json',
			success : function(message) {
				if (!errorvalidate(message)) {
					if (message.error == 'nouser') {
						alert('这个用户还未登录');
					}
				} else {
					appendMessage(id, username, message);
					//设置滚动条到消息查看div底部
					$("#show" + id).scrollTop(100000);
				}
			},
			error : ajaxError
		});
	}
	//接受消息
	function receviceMessage() {
		$.ajax({
			type : 'POST',
			timeout : 2000,
			url : 'receviceMessage.do',
			dataType : 'json',
			success : function(data) {
				//如果有人与客户聊天
				$.each(data.messageMap, function(id, userMessaegMap) {
					//如果客户刚刚说了话
					$.each(userMessaegMap, function(i, message) {
						appendMessage(id, id, message);
					});
				});
			},
			error : ajaxError
		});
	}

	var oldusers = [];
	//接收所有登陆的用户
	function loginUsers() {
		$.ajax({
			type : 'POST',
			timeout : 2000,
			url : 'getUsers.do',
			dataType : 'json',
			success : function(users) {
				//alert(users);
				//添加新用户
				$.each(users, function(id, user) {
					//不是当前登录用户
					if (user != username) {
						//如果用户不存在原有用户数组中则增加
						if ($.inArray(user, oldusers) == -1) {
							addButton(user);
						}
					}
				});
				//去掉下线用户
				$.each(oldusers, function(id, user) {
					//不是当前登录用户
					if (user != username) {
						//如果原有用户不存在新数组中则此用户下线
						if ($.inArray(user, users) == -1) {
							//删除按钮
							$("#create-user" + user).remove();
							//删除dialog
							if ($('#dialog-form' + user).length >= 1) {
								$('#dialog-form' + user).dialog( "destroy" )
								$('#dialog-form' + user).remove();
							}
						}
					}
				});
				//用新数组替换老用户数组
				oldusers = users;
			},
			error : ajaxError
		});
	}
	//添加消息到div
	function appendMessage(id, authorName, message) {
		//如果还未开始进行通话，先创建对话form，然后打开，输入内容
		if ($("#show" + id).length < 1) {
			addForm(id);
			//展示的form数量加1
			formShowCount = formShowCount + 1;
			// $("#dialog-form"+id).dialog("open");
		}
		$("#show" + id).append(
				'' + authorName + '&nbsp;&nbsp;&nbsp;[' + message.time + ']:'
						+ message.message + '<br/>');
	}
	//执行ajax过程中发生了错误
	function ajaxError(XMLHttpRequest, textStatus, errorThrown) {
		alert('发生了错误');
	}
	/*******AJAX 与后台交互   end   */

	/** 公用函数*/
	//错误验证
	//{error:'nouser'}为返回的错误信息,后台传递了错误返回false
	function errorvalidate(data) {
		if (typeof (data.error) != 'undefined') {
			return false;
		} else {
			return true
		}
	}
</script>
</head>
<body>
  <DIV class="ui-layout-center">
     <div id="dialog-login" title="login">
          <form action="" id='loginForm'>用户名：
                   <input type="text" name='username' id='loginUserName'><br />
          </form>
     </div>
   <div id='forms'></div>
  </DIV>
  <DIV class="ui-layout-north">
    <div id='logoutbuttons'></div>
  </DIV>
  <DIV class="ui-layout-south"></DIV>
  <DIV class="ui-layout-east">
     <div id='buttons'></div>
  </DIV>

</body>
</html>
